<script setup>
// 右侧面板
import borderPage from '../generals/borderPage.vue'
import rightEcharts1 from '../echarts/rightEcharts/rightEcharts1.vue'
import rightEcharts2 from '../echarts/rightEcharts/rightEcharts2.vue'
import rightEcharts3 from '../echarts/rightEcharts/rightEcharts3.vue'
import { useCounterStore } from '@/stores'
const data = useCounterStore()

</script>

<template>
  <transition name="right">
    <div v-if="data.animate" id="rightpanel">
      <div class="venue">
        <borderPage>
          <h4>Module title</h4>
        </borderPage>
        <div class="venueechartsr">
          <rightEcharts1></rightEcharts1>
        </div>
      </div>

      <div class="population">
        <borderPage>
          <h4>Module title</h4>
        </borderPage>
        <div class="populationechartsr">
          <rightEcharts2></rightEcharts2>
        </div>
      </div>

      <div class="electric">
        <borderPage>
          <h4>Module title</h4>
        </borderPage>
        <div class="electricechartsr">
          <div class="electricechartsr_left">
            <rightEcharts3></rightEcharts3>
          </div>
          <div class="electricechartsr_right">
            <rightEcharts3></rightEcharts3>
          </div>
        </div>
      </div>

      <div class="title">
        <span>1254</span>
        <span>21</span>
        <span>256</span>
        <span>15</span>
        <span>title</span>
        <span>title</span>
        <span>title</span>
        <span>title</span>
      </div>
    </div>
  </transition>

</template>

<style lang="scss" scoped>
#rightpanel {
  position: absolute;
  top: vh(164px);
  right: vw(100px);
  z-index: 1;

  // 表一
  .venue {
    margin-bottom: vh(42px);

    .venueechartsr {
      width: vw(350px);
      height: vh(217px);
      // border: 1px solid skyblue;
    }
  }

  // 表二
  .population {
    margin-bottom: vh(62px);

    .populationechartsr {
      width: vw(317px);
      height: vh(186px);
      margin-top: vh(45px);
      margin-left: vw(34px);
      background: url('../../assets/img/yuanback.png') no-repeat center/100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

  }

  // 表三
  .electric {
    margin-right: vw(90px);

    .electricechartsr {
      width: vw(288px);
      height: vh(136px);
      display: flex;
      justify-content: center;

      .electricechartsr_left {
        width: vw(144px);
        height: 100%;
      }

      .electricechartsr_right {
        width: vw(144px);
        height: 100%;
      }
    }
  }

  .title {

    span {
      position: absolute;
      color: #248f90;
      font-size: rem(15px);

      // number
      &:nth-child(1) {
        top: vh(375px);
        right: vw(290px);
      }

      &:nth-child(2) {
        top: vh(375px);
        right: vw(50px);
      }

      &:nth-child(3) {
        top: vh(502px);
        right: vw(290px);
      }

      &:nth-child(4) {
        top: vh(502px);
        right: vw(50px);
      }

      // title
      &:nth-child(5) {
        top: vh(355px);
        right: vw(270px);
        font-size: rem(12px);
        color: #7b8d9c;
      }

      &:nth-child(6) {
        top: vh(355px);
        right: vw(80px);
        font-size: rem(12px);
        color: #7b8d9c;
      }

      &:nth-child(7) {
        top: vh(522px);
        right: vw(270px);
        font-size: rem(12px);
        color: #7b8d9c;
      }

      &:nth-child(8) {
        top: vh(522px);
        right: vw(80px);
        font-size: rem(12px);
        color: #7b8d9c;
      }
    }
  }

  h4 {
    font-size: rem(12.27px);
    font-weight: 400;
    color: #fff;
    margin-left: vw(47px);
    line-height: vh(26px);
  }
}

/* 淡入淡出加滑动效果 */
.right-enter-active,
.right-leave-active {
  transition: opacity 1s, transform 1s;
}

.right-enter-from {
  opacity: 0;
  transform: translateX(100px);
}

.right-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

@keyframes animate {
  100% {
    transform: rotate(360deg);
  }
}
</style>